<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>住户管理</span>
      </div>
      <div>
        <div style="float: left">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="住户类型">
              <el-select v-model="identity" clearable placeholder="请选择">
                <el-option label="业主" value="业主"></el-option>
                <el-option label="亲戚" value="亲戚"></el-option>
                <el-option label="住户" value="住户"></el-option>
                <el-option label="朋友" value="朋友"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div style="float: left; margin-left: 60px">
          <span class="">住户状态:</span>
          <el-input style="width: 300px" v-model="state" placeholder="请输入内容"></el-input>
        </div>
        <div>
          <el-button style="float: right" type="primary">重置</el-button>
          <el-button style="float: right; margin-right: 30px" type="primary" @click="load">查询</el-button>
        </div>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header" class="clearfix">
        <span>住户列表</span>
        <div class="e2">
          <el-button type="primary" size="mini" style="margin-right: 10px" @click="addCommunity">新建</el-button>
          <el-button type="primary" size="mini" style="margin-right: 10px">批量操作</el-button>
        </div>
      </div>

      <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="姓名" prop="users[0].userName" width="120">
          </el-table-column>
          <el-table-column prop="users[0].identity" label="类型" width="120">
          </el-table-column>
          <el-table-column prop="state" label="状态" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="users[0].idCard" label="证件号码" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="users[0].phone" label="手机号码" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="buildings[0].name" label="房间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="update(scope.row)">审核</el-button>
              <el-button type="text" @click="update(scope.row)">编辑</el-button>
              <el-button type="text" @click="del(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 编辑 -->
        <el-dialog title="楼座编辑" :visible.sync="dialogFormVisibleEdit">
          <el-form label-position="right" label-width="80px" :model="forms"
            style="width: 400px; margin-left: 20px; margin-top: 40px">
            <el-form-item label="楼座名称">
              <el-input v-model="forms.howMany"></el-input>
            </el-form-item>
            <el-form-item label="房屋用途">
              <!-- <el-input v-model="forms.houseUse"></el-input> -->
              <el-select v-model="forms.houseUse" clearable placeholder="请选择">
                <el-option label="普通住宅" value="普通住宅"></el-option>
                <el-option label="商业用地" value="商业用地"></el-option>
                <el-option label="商住两用" value="商住两用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="建成日期">
              <el-date-picker v-model="forms.builtTime" type="datetime" placeholder="选择日期时间"
                value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
              <!-- <el-input v-model="formLabelAlign.type"></el-input> -->
            </el-form-item>
            <el-form-item label="楼层数量">
              <el-input-number v-model="forms.totalFloor" @change="handleChange" :min="1" :max="30">
              </el-input-number>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="forms.remark"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="updatebuilding">确 定</el-button>
          </div>
        </el-dialog>
        <div class="block">
          <div class="page">
            <el-pagination background layout="prev, pager, next" :page-count="page.pages"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: {
        howMany: '',
        houseUse: "",
        builtTime: "",
        buildingSum: "",
        totalFloor: "",
        remark: "",
        buildingId: "",
      },

      identity: "",
      state: "",
      communityId: "",
      dialogFormVisibleEdit: false, // 用于用户编辑弹窗控制关闭
      // 分页字段
      page: {},
      tableData: [],
      multipleSelection: [],
    };
  },
  created() {
    //进入页面进行加载全查
    this.load();
  },
  methods: {
    load() {
      this.$axios
        .get("/serverzc/cell/findcell", {
          params: {
            communityId: localStorage.getItem("communityId"),
            identity: this.identity,
            state: this.state,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.page = res.data;
          this.tableData = this.page.list;
          for (var i = 0; this.tableData.length; i++) {
            var a = this.tableData[i].buildings[0].howMany + this.tableData[i].portal[0].howPortal
            this.tableData[i].buildings[0].name = a
          }

        });
    },
    handleCurrentChange(val) {
      this.$axios
        .get("/serverzc/cell/findcell", {
          params: {
            pagenow: val,
          },
        })
        .then((res) => {
          this.page = res.data;
          this.tableData = this.page.list;
        });
    },
    // 添加
    addCommunity() {
      this.$router.push({
        path: "/addResident",
      });
    },
    // 删除
    del(row) {
      console.log(row.middleId);
      this.$axios
        .get("/serverzc/cell/del?id=" + row.middleId)
        .then((res) => {
          this.load();
        });
    },
    // 修改
    update(row) {
      this.dialogFormVisibleEdit = true;
      this.forms.howMany = row.howMany
      this.forms.houseUse = row.houseUse
      this.forms.builtTime = row.builtTime
      this.forms.totalFloor = row.totalFloor
      this.forms.remark = row.remark
      this.forms.buildingId = row.buildingId
    },
    updatebuilding() {
      this.$axios
        .post("/serverzc/info/updatebuilding", this.forms)
        .then((res) => {
          this.dialogFormVisibleEdit = false,
            this.load();
        });
    },
  },
};
</script>

<style scoped>
</style>